<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MyIcon from '@/components/my-icon/index.vue'
import entrances from '../component/entrances.vue'
const active = ref(0)
const router = useRouter()
const route = useRoute()
const history = ref(1)
const auto = ref(1)
const value = ref(1)
const leftTab = ref(2)

const time = ref(['2022-09-17', '2022-10-17'])
const optionList = ref([
	{
		value: 1,
		label: '每次打开朋友圈'
	},
	{
		value: 2,
		label: '点击次数'
	}
])
const ruleList = ref([
	{
		id: 123,
		user: 1,
		add: 1,
		arrive: 1,
		addTag: false,
		tag: []
	}
])
const deleteInput = (id) => {
	ruleList.value = ruleList.value.filter((item) => {
		return item.id != id
	})
}
const tabList = [
	{
		key: 0,
		title: '基础设置'
	},
	{
		key: 1,
		title: '入口设置'
	},
	{
		key: 2,
		title: '成员设置'
	}
]
const addRule = () => {
	const ruleObj = {
		id: 123,
		user: 1,
		add: 1,
		arrive: 1,
		addTag: false,
		tag: []
	}

	if (ruleList.value.length !== 0) {
		ruleObj.id = ruleList.value[ruleList.value.length - 1].id + 1
		ruleObj.user = 2
	}
	ruleList.value.push(ruleObj)
}
onMounted(() => {
	if (route.query.id) {
		leftTab.value = 1
	} else {
		leftTab.value = 2
	}
})
const changeTab = (key) => {
	active.value = key
}
const nextStep = (type) => {
	if (type === 'next') {
		if (active.value < 2) {
			active.value += 1
		} else {
			router.push('/')
		}
	} else {
		if (active.value > 0) {
			active.value -= 1
		}
	}
}
</script>
<template>
	<div class="container">
		<div class="container-left">
			<div class="step-box" v-if="leftTab === 1">
				<el-steps direction="vertical" :active="active" finish-status="success">
					<el-step title="基础设置" />
					<el-step title="入口设置" />
					<el-step title="成员设置" />
				</el-steps>
			</div>
			<div class="menu" v-else>
				<div
					@click="changeTab(item.key)"
					v-for="item in tabList"
					:key="item.key"
					:class="item.key === active ? 'active menu-title' : 'menu-title'"
				>
					{{ item.title }}
				</div>
			</div>
			<div class="step-btn" v-if="leftTab === 1">
				<el-button class="step-next" @click="nextStep('prev')" v-show="active > 0">上一步</el-button>
				<el-button class="step-next" @click="nextStep('next')" type="primary">{{
					active === 2 ? '完成设置' : '下一步'
				}}</el-button>
			</div>
		</div>
		<div class="container-right">
			<el-scrollbar max-height="100%">
				<div class="panel-first" v-show="active === 0">
					<div class="justify-center panel-header">
						<div class="title">同步企微朋友圈至增强朋友圈的方式</div>
					</div>
					<div class="panel-content">
						<div class="panel-content-item">
							<div class="panel-title">同步历史企微朋友圈记录：</div>
							<div class="panel-select">
								<el-radio-group v-model="history" class="ml-4">
									<el-radio :label="1" size="large"> 是（推荐） </el-radio>
									<el-radio :label="2" size="large">否</el-radio>
								</el-radio-group>
								<div>
									<el-date-picker
										style="width: 225px; margin-top: 8px"
										v-model="time"
										type="daterange"
										range-separator="~"
										start-placeholder="Start date"
										end-placeholder="End date"
									/>
								</div>
								<div class="time-title">默认同步近一个月的企微朋友圈，也可自主同步选择任意一个月的记录</div>
							</div>
						</div>
						<div class="panel-content-item" style="margin-top: 17px; margin-bottom: 48px">
							<div class="panel-title">自动同步新企微朋友圈记录 ：</div>
							<div class="panel-select">
								<el-radio-group v-model="auto" class="ml-4">
									<el-radio :label="1" size="large"> 是（推荐） </el-radio>
									<el-radio :label="2" size="large">否</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					<div class="justify-center panel-header">
						<div class="title">增强朋友圈客户访问设置</div>
					</div>
					<div class="panel-content">
						<div class="s-title s-title-line">设置增强朋友圈客户行为追踪规则</div>
						<div class="com-tips">
							<p class="content">
								<el-icon style="color: #1890ff; margin-top: 3px; margin-right: 3px; cursor: pointer"
									><BellFilled
								/></el-icon>
								设置打开朋友圈行为和次数的追踪规则，当客户触发规则时即可获得设置的客户评分和客户标签，并在此类客户的客户动态中展示
							</p>
						</div>
						<section class="customer-score-settting-panel">
							<div v-show="ruleList.length > 0" class="rule-list">
								<el-scrollbar max-height="320px">
									<div v-for="(item, index) in ruleList" :key="index" class="rule-item">
										<div class="rule-name">
											<el-icon
												style="margin-right: 5px; font-size: 15px; cursor: pointer"
												@click="deleteInput(item.id)"
											>
												<Remove />
											</el-icon>
											<strong> 规则{{ index + 1 }}：</strong>用户
										</div>
										<el-select style="height: 32px" v-model="item.user">
											<el-option
												:disabled="option.value === item.user"
												v-for="option in optionList"
												:key="option.value"
												:label="option.label"
												:value="option.value"
											/>
										</el-select>
										<div v-show="item.user === 2" class="rule-title">达到</div>
										<el-input v-show="item.user === 2" v-model="item.arrive" style="height: 32px; width: 143px">
											<template #append>分</template>
										</el-input>
										<div class="rule-title">增加</div>
										<el-input v-model="item.add" style="height: 32px; width: 143px">
											<template #append>分</template>
										</el-input>
										<div class="rule-title" style="margin-right: 0">并打上标签：</div>
										<el-switch v-model="item.addTag" style="margin-right: 5px" />
										<el-select
											:style="{ 'margin-top': item.user === 2 ? '10px' : 0 }"
											v-model="item.tag"
											v-show="item.addTag"
											remote
											reserve-keyword
											remote-show-suffix
											:suffix-transition="false"
											placeholder="请选择标签"
											@focus="changeDialogVisible(true)"
										>
										</el-select>
									</div>
								</el-scrollbar>
							</div>
							<div v-show="ruleList.length === 0" class="rule-empty">
								<img src="../../../../assets/img/img/list-empty.499dbb25961c.png" alt="" />
								<p>还没有添加规则哦~</p>
							</div>
							<div class="action">
								<div class="rule-add" @click="addRule()">
									<el-icon style="margin-top: 3px; font-size: 16px; margin-right: 5px"><CirclePlus /></el-icon>
									添加规则
								</div>
								<span>（添加的多条规则，可同时生效）</span>
							</div>
						</section>
					</div>
				</div>
				<entrances v-show="active === 1" />
				<div class="main" v-show="active === 2">
					<div class="tips-primary">
						<p>
							<el-icon style="color: #1890ff; margin-top: 3px; margin-right: 3px; font-size: 14px"
								><BellFilled
							/></el-icon>
							通知使用成员在企业微信移动端填写朋友圈链接，填写方式如下
							<a href="http://localhost:3000/app/wework/#/setMomentUrl" target="_blank"> 如何获取朋友圈链接？ </a>
						</p>
					</div>
					<img
						style="margin-top: 8px"
						src="http://www.crmuu.com/moment-setting_moment-setting-step-3.e6a1a22fbd3a.png"
					/>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.justify-center {
	align-items: center;
}
.container {
	display: flex;
	justify-content: space-between;
	-webkit-box-flex: 1;
	flex: 1;
	width: 100%;
	padding: 16px;
	.container-left,
	.container-right {
		max-height: calc(100vh - 140px);

		background-color: #fff;
	}
	.container-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 14%;
		padding-top: 24px;
		:deep(.el-step.is-vertical .el-step__line) {
			width: 1px;
			top: 30px;
			bottom: 9px;
			left: 11px;
		}
		:deep(.el-step__icon) {
			width: 20px;
			height: 20px;
			font-size: 12px;
		}
		:deep(.el-step__title.is-process) {
			font-weight: 500;
			color: #a8abb2;
		}
		:deep(.el-step__head.is-process) {
			color: #fff;
			border-color: #1890ff;
		}
		:deep(.el-step__head.is-process .el-step__icon) {
			background-color: #1890ff;
		}
		:deep(.el-step__line-inner) {
			display: none;
		}
		:deep(.el-step__head.is-wait .el-step__icon) {
			border-color: #ccd5de;
			background: #ccd5de;
		}
		:deep(.el-step__head.is-success) {
			color: #1890ff;
			border-color: #1890ff;
		}
		:deep(.el-step__title.is-success) {
			color: #1890ff;
		}
		:deep(.el-step__head.is-wait) {
			color: #fff;
		}
		.menu {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			// height: 168px;
			color: #000000a6;
			.active {
				position: relative;
				background: #effaff;
				font-size: 14px;
				font-weight: 600;
				color: #1890ff;
			}
			.active::before {
				content: ' ';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 4px;
				background: #1890ff;
			}
			.menu-title {
				width: 100%;
				height: 36px;
				line-height: 36px;
				font-size: 14px;
				margin-bottom: 20px;
				text-align: center;
				cursor: pointer;
			}
			.menu-title:first-child {
				margin-top: -5px;
			}
		}
		.step-box {
			height: 150px;
		}
		.step-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 24px;
		}
		.step-next {
			width: 92px;
			height: 36px;
			border-radius: 2px;
			margin: 0;
			margin-top: 12px;
			// background-color: #1890ff;
		}
	}
	.container-right {
		width: 85%;
		padding: 24px 24px 0 24px;
		.main {
			width: 100%;
			padding-bottom: 16px;
			a {
				text-decoration: none;
				color: #1890ff;
			}
			img {
				margin-left: -8px;
			}
			.tips-primary {
				max-width: 946px;
				padding: 8px 16px;
				background: #effaff;
				box-shadow: 0 2px 4px 0 transparent;
				border-radius: 2px;
				font-size: 13px;
				color: #000000a6;
				span {
					color: #1890ff;
					cursor: pointer;
				}
			}
		}
		.panel-header {
			padding-bottom: 12px;
			border-bottom: 1px solid #e9ebf3;
			overflow: hidden;
			.title {
				display: flex;
				-webkit-box-align: center;
				align-items: center;
				font-size: 14px;
				font-weight: 600;
				color: #333;
			}
		}
		.panel-first {
			width: 100%;
			.panel-content {
				.panel-content-item {
					display: flex;
					align-items: flex-start;
					.panel-title {
						width: 22%;
						text-align: right;
						color: #000000a6;
						margin-top: 8px;
						font-size: 14px;
					}
					.panel-select {
						.time-title {
							margin-top: 8px;
							color: rgba(0, 0, 0, 0.45);
							font-size: 13px;
						}
					}
				}
				.s-title {
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					font-size: 15px;
					font-weight: 600;
					color: #333;
					margin-top: 16px;
					line-height: 15px;
					padding: 3px 0;
				}
				.s-title-line:before {
					content: ' ';
					display: inline-block;
					width: 4px;
					height: 15px;
					background: #1890ff;
					margin-right: 6px;
				}
				.com-tips {
					min-height: 38px;
					max-width: 920px;
					background: #effaff;
					border-radius: 2px;
					font-size: 13px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
					margin-top: 16px;
					padding: 8px 16px;
					line-height: 20px;
					.content {
						display: flex;
						align-items: center;
					}
				}
				.customer-score-settting-panel {
					width: 100%;
					max-width: 920px;
					margin-top: 16px;
					background: #fbfbfb;
					border-radius: 2px;
					border: 1px solid #eee;
					font-size: 14px;
					.rule-list {
						padding: 0 0 20px 12px;
						.rule-item {
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							margin-top: 16px;
							.rule-name {
								display: flex;
								margin-right: 8px;
								align-items: center;
								white-space: nowrap;
								color: rgba(0, 0, 0, 0.65);
							}
							.rule-title {
								margin: 0 8px;
								align-items: center;
								white-space: nowrap;
								color: rgba(0, 0, 0, 0.65);
							}
						}
					}
					.rule-empty {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding-bottom: 20px;
						font-size: 14px;
						color: #000000a6;
					}
					.action {
						display: flex;
						// align-items: center;
						border-top: 1px dashed #e9e9e9;
						padding: 8px 12px;
						font-size: 13px;
						color: #00000073;
						.rule-add {
							display: flex;
							align-items: center;
							color: #1890ff;
							font-size: 14px;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
}
</style>
